<template>
  <view class="box-box">
    <view style="height: 15rpx"></view>
    <view>

        <view class="box" v-for="(item, index) in tabbarList"
        @click="changeTabbar(item.code)"
              :style="{
                width: 750/tabbarList.length + 'rpx'
              }"
        >
          <view
              class="unread-tag"
          v-if="item.code === 'message'&& unreadCount > 0"
          >{{unreadCount}}</view>
          <view>
            <view>
              <image
                  v-show="tabbarSelected !== item.code"
                  mode="aspectFit"
                  class="icon"
                  :src="item.iconPath">
              </image>
              <image
                  v-show="tabbarSelected === item.code"
                  mode="aspectFit"
                  class="icon-selected"
                  :src="item.selectedIconPath"></image>
            </view>
<!--            <view class="text">{{item.text}}</view>-->
            <view class="text"
            :class="{
              'text-selected': tabbarSelected === item.code
            }"
            >
              <kt-one-line-text
                  width="100rpx"
                  :text="item.text"
                  ></kt-one-line-text>
            </view>
          </view>
<!--          <view v-show="tabbarSelected === item.code">-->
<!--            <view>-->
<!--              <image-->
<!--                  mode="aspectFit"-->
<!--                  class="icon-selected" :src="item.selectedIconPath"></image>-->
<!--            </view>-->
<!--            <view class="text-selected">-->
<!--              <kt-one-line-text-->
<!--                  :width="(750/tabbarList.length-10) + 'rpx'"-->
<!--                  :text="item.text"-->
<!--              ></kt-one-line-text>-->
<!--            </view>-->
<!--          </view>-->


        </view>


    </view>
    <view style="height: 25rpx"></view>
  </view>
</template>

<script>
export default {
  props: {
    selected: {
      type: String,
      default: 'all'
    }
  },
  data() {
    return {
      tabbarSelected: 'all',
      unreadCount: 0,
      // tabbar列表：首页、全部、查询、我的
      tabbarList: [
        {
          iconPath: this.$kt.file.byPath('tabbar/home.svg'),
          selectedIconPath: this.$kt.file.byPath('tabbar/home-selected.svg'),
          text: this.$i18n.zhToGlobal("首页"),
          code: 'home',
          navigateBarColor: '#000000'
        },
        {
          iconPath: this.$kt.file.byPath('tabbar/shoppingCart.svg'),
          selectedIconPath: this.$kt.file.byPath('tabbar/shoppingCart-selected.svg'),
          text: this.$i18n.zhToGlobal("购物车"),
          code: 'shoppingCart',
          navigateBarColor: '#000000'
        },
        {
          iconPath: this.$kt.file.byPath('tabbar/message.svg'),
          selectedIconPath: this.$kt.file.byPath('tabbar/message-selected.svg'),
          text: this.$i18n.zhToGlobal("消息"),
          code: 'message',
          navigateBarColor: '#000000'
        },
        {
          iconPath: this.$kt.file.byPath('tabbar/mine.svg'),
          selectedIconPath: this.$kt.file.byPath('tabbar/mine-selected.svg'),
          text: this.$i18n.zhToGlobal("我的"),
          code: 'mine',
          navigateBarColor: '#000000'
        }
      ]
    }
  },
  mounted() {
    this.$kt.event.on("chat:unread:count", (count) => {
      this.unreadCount = count;
    });
  },
  methods:{
    changeTabbar(code){
      this.tabbarSelected = code;
      // 修改导航栏颜色
      let color = this.tabbarList.find(item => item.code === code).navigateBarColor || "#000000";
      // 修改导航栏颜色
      wx.setNavigationBarColor({
        frontColor: color,
        backgroundColor: color
      });

      this.$emit('changeTabbar', code);
    }
  },
  watch: {
    selected: {
      handler: function (val) {
        this.tabbarSelected = val;
      },
      immediate: true
    }
  }
}
</script>


<style scoped lang="scss">
.box-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9999;
  //上阴影
  //box-shadow: 0px -2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
}

.box {
  position: relative;
  text-align: center;
  display: inline-block;
}

.unread-tag{
  position: absolute;
  top: -8rpx;
  right: 8rpx;
  border-radius: 20rpx;
  background-color: #FF0000;
  color: #FFFFFF;
  font-size: 24rpx;
  text-align: center;
  padding: 0 10rpx;
}

.icon {
  width: 52rpx;
  height: 52rpx;
}

.text {
  font-size: 20rpx;
  color: #AAAAAA;
}

.icon-selected{
  width: 52rpx;
  height: 52rpx;
}

.text-selected{
  font-size: 20rpx;
  color: #000000;
}
</style>